<!--
 * @Description: 消息
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-04-23 14:35:17
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-13 09:59:05
 * @FilePath: \jiekuan-app\src\pages\message\message.vue
-->
<template>
  <div class="page">
    <div class="page-header" id="header">
      <!-- <div class="top">消息</div> -->
      <u-navbar title="消息" :background="nav_background" title-color="#ffb159" :height="60" :is-back="false"
                :border-bottom="false">
      </u-navbar>
    </div>
    <div class="page-content u-p-0">
      <scroll-view scroll-y="true" class="" :style="contentHeight" @scrolltolower="handleScroll">
        <template v-if="list && list.length">
          <div class="u-m-t-32 item_box">
            <div v-for="(item, index) in list" :key="index" class="item u-flex"
                 @click="handleClick({ type: 'chat', item: item })">
              <div class="avatar_box u-rela flex-shrink">
                <image src="" class="avatar" alt="" />
                <div class="avatar_count">{{ item.message_num }}</div>
              </div>
              <div class="u-flex u-row-between u-col-center flex-1 u-m-l-30">
                <div>
                  <div class="name">{{ item.name }}</div>
                  <div class="msg_text u-m-t-44 u-line-1">{{ item.content }}</div>
                </div>
                <div class="time">刚刚</div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <u-empty mode="list" class="u-empty"></u-empty>
        </template>
      </scroll-view>
    </div>
    <div class="page-footer" id="footer">
      <customizeTabbar></customizeTabbar>
    </div>
    <u-no-network></u-no-network>
    <view-loading :loading="loadingSkeleton"></view-loading>
  </div>
</template>

<script>
import customizeTabbar from '@/components/customizeTabbar'
export default {
  name: 'Message', // 页面名称
  components: {
    customizeTabbar
  }, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      loadingSkeleton: false,
      nav_background: {
        backgroundImage: 'transparent'
      },
      list: [], // 信息列表
      contentHeight: '', // 列表滚动高度
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {
    this.$WebIM.conn.listen({
      onOpened: (message) => {
        this.$nextTick(() => {
          this.$WebIM.getConversationList({
            pageNum: 1,
            pageSize: 30,
            number: 10,
            success(rep) {
              console.log('getConversationList', rep)
            },
            error(err) {
              console.log('getConversationList.err', err)
            }
          })
        })
      }
    })


  }, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {
    this.getContentHight()
  }, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    handleClick(options) {
      const {
        type,
        item
      } = options

      switch (type) {
        case 'chat':
          this.$jump({
            name: 'chat',
            query: {}
          })
          break
        default:
          break
      }
    },
    // 列表滚动到底部
    handleScroll() {
      if (this.page < this.totalPages) {
        this.page += 1
      }
    },
    // 计算列表滚动高度
    getContentHight() {
      console.log('进入', document.body.clientHeight)
      console.log('进入22', document.getElementById('header').offsetHeight)
      console.log('进入33', document.getElementById('footer').offsetHeight)
      const pageHeight = document.body.clientHeight
      const pageHeaderHeight = document.getElementById('header').offsetHeight
      const pageFooterHeight = document.getElementById('footer').offsetHeight
      // this.$u.getRect('.page').then((res) => {
      //   console.log('进入page')
      //   const pageHeight = res.height
      //   this.$u.getRect('.page-header').then((res2) => {
      //     console.log('进入pagehearder')
      //     const pageHeaderHeight = res2.height
      //     this.$u.getRect('.page-footer').then((res3) => {
      //       console.log('进入pagefooter')
      //       const pageFooterHeight = res3.height
      const contentHeight = pageHeight - pageHeaderHeight - pageFooterHeight
      this.contentHeight = 'height:' + contentHeight + 'px'
      //     })
      //   })
      // })
    },
  }, // 挂载一些方法
  onLoad(options) {
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onShow() {}, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.page {
  background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}

.page-header,
.page-content {
  background: transparent;
}

.top {
  font-size: 35rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffb159;
  padding-top: 63rpx;
  text-align: center;
}

.item {
  padding: 30rpx 40rpx 22rpx 34rpx;
  border-bottom: 1rpx solid 1rpx solid rgba($color: #fff, $alpha: 0.03);
}

.avatar_box {
  width: 110rpx;
  height: 110rpx;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.avatar_count {
  position: absolute;
  top: 0;
  right: 0;
  width: 25rpx;
  height: 25rpx;
  background: #d7443e;
  border-radius: 13rpx;
  font-size: 15rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  line-height: 25rpx;
}

.name {
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}

.msg_text {
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}

.time {
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #dcdcdc;
}
</style>
